<template>
	<div class="indexWrap">
		<router-view></router-view>
		<van-tabbar style="background: #B5F3EA;" v-model="active"  route active-color="#00A170" safe-area-inset-bottom>
			<van-tabbar-item to="/mall">
				<span>{{$t('textTrans.主页')}}</span>
				<img slot="icon" slot-scope="props" :src="props.active?mallSel:mall" />
			</van-tabbar-item>
			<van-tabbar-item to="/coinTread">
				<span>{{$t('textTrans.贸易')}}</span>
				<img slot="icon" slot-scope="propsMall" :src="propsMall.active?center:centersel" />
			</van-tabbar-item>
			<van-tabbar-item to="/graborder">
				<span>{{$t('textTrans.投资')}}</span>
				<img slot="icon" slot-scope="propstop" style="width: 40px;height: 40px;margin-top: -20px;" :src="carsel" />
			</van-tabbar-item>
			<van-tabbar-item to="/onLine">
				<span>{{$t('textTrans.分享')}}</span>
				<img slot="icon" slot-scope="propsPlan" :src="propsPlan.active?mysubscribe:subscribe" />
			</van-tabbar-item>
			<van-tabbar-item to="/personal">
				<span>{{$t('textTrans.我的')}}</span>
				<img slot="icon" slot-scope="propsGroup" :src="propsGroup.active?mySel:my" />
			</van-tabbar-item>
		</van-tabbar>
	</div>
</template>
<script>
	import {
		Tabbar,
		TabbarItem
	} from "vant";
	export default {
		components: {
			[Tabbar.name]: Tabbar,
			[TabbarItem.name]: TabbarItem
		},
		data() {
			return {
				active: 0,
				mallSel: require("../assets/imgs/tabs/mallSel.png"),
				mall: require("../assets/imgs/tabs/mall.png"),
				centersel: require("../assets/imgs/tabs/conterSel.png"),
				center: require("../assets/imgs/tabs/content.png"),
				carsel: require("../assets/imgs/tabs/carSel.png"),
				car: require("../assets/imgs/tabs/car.png"),
				mySel: require("../assets/imgs/tabs/personalSel.png"),
				my: require("../assets/imgs/tabs/personal.png"),
				mysubscribe: require("../assets/imgs/tabs/subscribeAct.png"),
				subscribe: require("../assets/imgs/tabs/subscribe.png")
			};
		}
	};
</script>
<style lang="less" scoped>
	@media screen and (min-width: 600px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/
	.van-tabbar-item--active {
		color: #333;
		background: #B5F3EA;
	}

	.van-tabbar-item__text {
		color: #333;
		font-size: 13px;
	}

	.van-tabbar {
		width:50%;
		margin-left: 25%;
		background: white;
	}

	.van-tabbar-item {
		text-align: center;
		color: #333;
	}

	.van-tabbar-item div {
		margin-top: 5px;
		font-size: 12px;
	}

	.tabImg {
		width: 23px;
		height: 21px;
	}

	.perImg {
		width: 25px;
		height: 23px;
	}

	.marketImg {
		width: 27px;
		height: 22px;
	}

}
@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/


	.van-tabbar-item--active {
		color: #333;
		background: #B5F3EA;
	}

	.van-tabbar-item__text {
		color: #333;
		font-size: 13px;
	}

	.van-tabbar {
		background: #B5F3EA;
	}

	.van-tabbar-item {
		text-align: center;
		color: #333;
	}

	.van-tabbar-item div {
		margin-top: 5px;
		font-size: 12px;
	}

	.tabImg {
		width: 23px;
		height: 21px;
	}

	.perImg {
		width: 25px;
		height: 23px;
	}

	.marketImg {
		width: 27px;
		height: 22px;
	}
}

</style>
